Next.js এ CSS ব্যবহারের জন্য দুটি প্রধান পদ্ধতি রয়েছে: Global CSS এবং CSS Modules। এই দুটি পদ্ধতির মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের স্টাইলিং নিয়ন্ত্রণ করতে পারবেন, তবে প্রতিটির ব্যবহারিক উদ্দেশ্য এবং কনফিগারেশন কিছুটা আলাদা।
নিচে বিস্তারিতভাবে Global CSS এবং CSS Modules ব্যবহারের পদ্ধতি আলোচনা করা হয়েছে।
১. Global CSS
Global CSS ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের জন্য গ্লোবাল স্টাইল শিট তৈরি করতে পারেন, যা অ্যাপের প্রতিটি পেজে প্রযোজ্য হবে। Next.js এ global CSS ব্যবহারের জন্য একটি নির্দিষ্ট পদ্ধতি রয়েছে, এবং এটি সাধারণত pages/_app.js ফাইলে ইমপোর্ট করা হয়।
Global CSS ব্যবহার করার পদ্ধতি:
- প্রথমে
styles/globals.cssনামে একটি CSS ফাইল তৈরি করুন।
/* styles/globals.css */
/* গ্লোবাল স্টাইল */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
- এরপর,
pages/_app.jsফাইলে এই CSS ফাইলটি ইমপোর্ট করুন। Next.js এ_app.jsফাইলটি গ্লোবাল অ্যাপ কনটেইনার হিসেবে কাজ করে এবং এটি আপনার পুরো অ্যাপের মধ্যে শেয়ার করা হয়।
// pages/_app.js
import '../styles/globals.css' // গ্লোবাল CSS ইমপোর্ট
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
এখন, globals.css ফাইলের মধ্যে থাকা স্টাইলগুলো পুরো অ্যাপ্লিকেশনে প্রযোজ্য হবে।
Global CSS ব্যবহারের সুবিধা:
- গ্লোবাল স্টাইলগুলো অ্যাপের সব পেজে প্রযোজ্য।
- সাধারণ CSS লাইব্রেরি (যেমন Bootstrap, Tailwind CSS) যুক্ত করতে সহজ।
- সঠিকভাবে ব্যবহৃত হলে, এটি ছোট এবং সাধারণ অ্যাপ্লিকেশনগুলির জন্য উপকারী হতে পারে।
Global CSS ব্যবহারের সীমাবদ্ধতা:
- গ্লোবাল স্টাইলের কারণে স্টাইল কনফ্লিক্ট হতে পারে, কারণ সমস্ত পেজে একই CSS নিয়ম প্রযোজ্য।
- বিশেষ করে বড় অ্যাপ্লিকেশনে, কোডের সেন্ট্রালাইজড কন্ট্রোল হারিয়ে যাওয়ার ঝুঁকি থাকে।
২. CSS Modules
CSS Modules হল একটি বিশেষ ধরনের CSS স্টাইলিং পদ্ধতি, যেখানে স্টাইলগুলো কম্পোনেন্ট ভিত্তিক এবং স্কোপ করা হয়। এই পদ্ধতিতে, প্রতিটি CSS ক্লাস বা আইডি শুধু নির্দিষ্ট কম্পোনেন্টে প্রযোজ্য থাকে এবং অন্যান্য কম্পোনেন্টের সাথে স্টাইল কনফ্লিক্ট হয় না।
Next.js এ CSS Modules ব্যবহারের জন্য আপনি .module.css এক্সটেনশন ব্যবহার করবেন। CSS Modules দ্বারা কম্পোনেন্ট ভিত্তিক স্টাইলিং সহজে পরিচালনা করা যায়।
CSS Modules ব্যবহার করার পদ্ধতি:
- প্রথমে
styles/Home.module.cssনামে একটি CSS ফাইল তৈরি করুন।
/* styles/Home.module.css */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.title {
font-size: 2rem;
color: #0070f3;
}
- এরপর,
pages/index.jsফাইলে এই CSS ফাইলটি ইমপোর্ট করুন এবং CSS ক্লাসগুলো কম্পোনেন্টের মধ্যে ব্যবহার করুন।
// pages/index.js
import styles from '../styles/Home.module.css'; // CSS মডিউল ইমপোর্ট
export default function Home() {
return (
<div className={styles.container}>
<h1 className={styles.title}>Welcome to My Next.js App</h1>
<p>This is a component-based page using CSS Modules.</p>
</div>
);
}
এখানে, Home.module.css ফাইলের স্টাইলগুলো styles.container এবং styles.title ব্যবহার করে কম্পোনেন্টে প্রযোজ্য করা হয়েছে।
CSS Modules এর সুবিধা:
- স্কোপড স্টাইলিং: প্রতিটি CSS ক্লাস কম্পোনেন্টের মধ্যে সীমাবদ্ধ থাকে, তাই স্টাইল কনফ্লিক্ট এড়ানো যায়।
- পুনঃব্যবহারযোগ্য কম্পোনেন্ট: স্টাইলগুলো নির্দিষ্ট কম্পোনেন্টের সাথে সম্পর্কিত থাকায়, কম্পোনেন্টগুলো পুনঃব্যবহারযোগ্য হয় এবং অন্য কোথাও প্রভাব ফেলে না।
- সহজ ইন্টিগ্রেশন: আপনি একই সাইটে CSS Modules এবং Global CSS দুটোই ব্যবহার করতে পারেন।
CSS Modules এর সীমাবদ্ধতা:
- স্টাইলগুলি শুধু সেই কম্পোনেন্টের জন্য প্রযোজ্য, তাই যদি একই স্টাইল অনেক জায়গায় ব্যবহৃত হয়, তবে তার জন্য আলাদা CSS ফাইল তৈরি করতে হবে।
- ছোট অ্যাপ্লিকেশনের জন্য কিছুটা অতিরিক্ত কাজ হতে পারে।
৩. CSS in JS
Next.js আরও এক পদ্ধতি সরবরাহ করে CSS স্টাইলিং এর জন্য, যা হল CSS-in-JS। এর মাধ্যমে আপনি JavaScript ফাইলের মধ্যে CSS লিখতে পারেন, সাধারণত লাইব্রেরি ব্যবহার করে (যেমন styled-components বা @emotion/react)। এটি আরও ডাইনামিক এবং কম্পোনেন্ট-বেসড স্টাইলিং প্রদান করে।
সারাংশ
- Global CSS: আপনি পুরো অ্যাপ্লিকেশনের জন্য একক CSS ফাইল ব্যবহার করতে পারেন, যা সহজ এবং দ্রুত স্টাইলিংয়ের জন্য উপযুক্ত।
- CSS Modules: এটি কম্পোনেন্ট ভিত্তিক CSS ব্যবহারের একটি পদ্ধতি, যা প্রতিটি কম্পোনেন্টের স্টাইল অন্য কম্পোনেন্ট থেকে আলাদা রাখে এবং স্টাইল কনফ্লিক্ট এড়ায়।
- CSS-in-JS: আরও ডাইনামিক এবং কম্পোনেন্ট-ভিত্তিক স্টাইলিংয়ের জন্য CSS-in-JS পদ্ধতি ব্যবহার করা হয়, যা JavaScript কোডের মধ্যে CSS লিখতে দেয়।
এই দুটি পদ্ধতির মাধ্যমে আপনি আপনার Next.js অ্যাপ্লিকেশনের স্টাইলিং পরিচালনা করতে পারেন, প্রতিটির উপযোগিতা নির্ভর করে আপনার অ্যাপ্লিকেশনের আকার এবং প্রয়োজনের উপর।
Read more
